<template>
  <div :class="$style.container">
    <topbar title="Shipping Address List" rightTitle="Add" :nextAction="goToAdd" />
    <div :class="$style.listWrapper">
      <div class="table-row" :class="$style.list" v-for="item in addressList">
        <div :class="$style.radiolist" class="cell" @click="radioClickHandler">
          <label :class="$style.item">
            <span :class="$style.radiobox">
              <input
                :class="$style.input"
                type="radio"
                v-model="currentValue"
                name="address"
                :value="item.addressId"
              >
              <span :class="$style.check"></span>
            </span>
            <div :class="$style.info">
              <p class="grey-color">{{item.addressTitle}}</p>
              <p>{{item.addressDetail}}</p>
              <v-button
                type="danger"
                size="64px 21px"
                :round="true"
                :style="{ fontSize: '12px', marginTop: '4px' }"
                v-if="item.primary === 1"
              >
                Default
              </v-button>
            </div>
          </label>
        </div>
        <div class="text-right cell" :class="$style.edit" @click="edit(item.addressId)">
          <icon name="edit2" fontSize="24px"></icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { topbar, icon, button } from 'components'

export default {
  name: 'addressList',
  components: {
    topbar,
    icon,
    vButton: button,
  },
  computed: {
    ...mapState({
      addressList: state => state.address.addressList,
      selected: state => state.address.selected,
    }),
  },
  data() {
    return {
      currentValue: '',
    }
  },
  created() {
    document.body.scrollTop = 0
    this.$store.dispatch('getAddressList')
      .then(() => {
        const addressId = this.$route.query.id
        if (addressId) {
          this.currentValue = addressId
        } else {
          this.currentValue = this.selected ? this.selected.addressId : ''
        }
      })
  },
  methods: {
    goToAdd() {
      this.$router.push({ path: '/address' })
    },
    radioClickHandler() {
      this.$store.dispatch('selectAddress', this.currentValue)
      this.$router.back()
    },
    edit(addressId) {
      this.$router.push({
        path: '/address',
        query: { addressId },
      })
    },
  },
}
</script>

<style module lang="scss">
@import "~styles/include";

.container {
  background-color: $greybgColor;
  min-height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;
}

.radiolist {
  width: 250px;
}

.edit {
  width: 86px;
}

.radiobox {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}

.listWrapper {
  padding: 0 12px;
  background-color: #fff;
}

.list {
  background-color: #fff;
  padding: 14px 0;
  &:not(:last-child) {
    border-bottom: 1px solid $greyLineColor;
    @media (-webkit-min-device-pixel-ratio: 2) {
      border-width: .5px;
    }
  }
}

.info {
  display: inline-block;
  vertical-align: middle;
  max-width: 210px;
}

.item {
  display: inline-block;
  font-size: 14px;
  width: 100%;
  height: 100%;
}

.input {
  display: none;
  &:checked {
    + .check {
      border-color: $primaryColor;
      color: $primaryColor;
      &::after {
        border-color: $primaryColor;
        transform: rotate(45deg) scale(1);
      }
    }
  }
}

.check {
  display: inline-block;
  background-color: #fff;
  border: 2px solid #6B6B6B;
  border-radius: 2px;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  &::after {
    border: 2px solid transparent;
    border-left: 0;
    border-top: 0;
    content: " ";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 7px;
    height: 10px;
    transform: rotate(45deg) scale(0);
    transition: transform .2s;
  }
}

</style>
